<template>
  <div class="container">
    <div class="nav">
      <ul v-if="homeVisibleNav">
        <li @click="gotoHome">首页</li>
        <li @click="gotoWorks">作品</li>
        <li @click="gotoDiary">日记</li>
        <li @click="gotoContact">联系</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const homeVisibleNav = ref(false);

watch(
  () => route.path,
  (newPath) => {
    if (newPath == "/") {
      homeVisibleNav.value = false;
    } else {
      homeVisibleNav.value = true;
    }
  },
  { immediate: true }
);

const gotoHome = () => {
  router.push("/");
};
const gotoWorks = () => {
  router.push("/works");
};
const gotoDiary = () => {
  router.push("/diary");
};
const gotoContact = () => {
  router.push("/contact");
};
</script>

<style lang="scss" scoped>
.container {
  .nav {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 120px;
    background: rgba($color: #fff, $alpha: 0);
    top: 0;
    ul {
      display: flex;
      justify-content: center;
      list-style-type: none;
      margin-top: 70px;
      li {
        margin: 0 40px;
        cursor: pointer;
        font-size: 14px;
        color: #4d4d4d;
        letter-spacing: 1px;
      }
    }
    @media screen and (max-width: 600px) {
      ul {
        margin-top: 40px;
        li {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>